<template>
  <div class="container">
    <el-form
      ref="form"
      :model="form"
      label-width="95px"
    >
      <!--      基础信息-->
      <oms-purchase-title style="padding-bottom:20px">
        <span slot="left">基础信息</span>
      </oms-purchase-title>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="项目名称"
          >
            <el-tag size="small">
              {{ form.projectName }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程属性">
            <el-tag size="small">
              {{ form.projectAttributesText }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程类型">
            <el-tag size="small">
              {{ form.projectTypeText }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      申请单位-->
      <oms-purchase-title style="padding:20px 0">
        <span slot="left">申请单位信息</span>
      </oms-purchase-title>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="申请单位"
            prop="requestOrgan"
          >
            <el-tag size="small">
              {{ form.requestOrgan }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-tag size="small">
              {{ form.principal }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      联系人-->
      <oms-purchase-title style="padding:20px 0">
        <span slot="left">联系人信息</span>
      </oms-purchase-title>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="联系人"
            prop="concatPerson"
          >
            <el-tag size="small">
              {{ form.concatPerson }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="联系人电话"
            prop="concatPersonPhone"
          >
            <el-tag size="small">
              {{ form.concatPersonPhone }}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      资料信息-->
      <oms-purchase-title
        style="padding:20px 0"
        v-if="form.annex.length"
      >
        <span slot="left">资料信息</span>
      </oms-purchase-title>
      <el-row v-if="form.annex.length">
        <el-col
          :span="12"
          v-for="(item,index) in form.annex"
          :key="index"
          style="height: 130px;overflow: auto"
        >
          <p
            style="
        color: #879BBA;
        font-size: 14px;
        font-weight: bold;
"
          >
            {{ index+1 }}. {{ item.label }}
          </p>
          <Annex
            v-for="(a,ai) in item.value"
            :key="ai"
            :name="a.name"
            :url="a.url"
          ></Annex>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import Annex from '@/component/approval/Annex'

  export default {
    components: {
      Annex,
      omsPurchaseTitle: () => import('@/component/purchase/purchaseTitle')
    },
    props: {
      form: {
        type: Object,
        default: () => {
        }
      }
    },
    data () {
      return {}
    },
    methods: {
      view ({ url }) {
        window.open(url)
      }
    }
  }

</script>
<style scoped>
  .container {
    padding: 40px 30px;
  }
</style>
